<template>
  <div>
    <el-row>
      <el-col :span="20">
        <div class="grid-content bg-purple-dark">
          <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="moodValue" resize="none"></el-input>
          <br>
          <br>
          <el-button type="success" plain style="float: right" @click="saveMood()">发送心情</el-button>
        </div>
      </el-col>
    </el-row>
    <br>
    <br>
    <div v-for="temp in allMood.content">
      <el-row :gutter="20">
        <el-col :span="4" v-for="j in temp">
          <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div class="text item">
                <span>{{j.detail}}</span>
              </div>
              <span style=" float:right|bottom;">{{j.author}}</span>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 分页 -->
    <el-pagination
      background
      @current-change="pageChange(currentPage)"
      :current-page.sync="currentPage"
      :page-size="30"
      layout="prev, pager, next,jumper"
      :total="allMood.totalElements"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      moodValue: "", //这是mood的value
      messageType: "", //这是消息的类型
      messageValue: "", //这是消息的值
      allMood: [],
      currentPage: 0
    };
  },
  methods: {
    message() {
      //消息弹窗
      this.$message({
        showClose: true,
        message: this.messageValue,
        type: this.messageType
      });
    },
    //保存心情
    saveMood() {
      if (this.moodValue.length > 50 || this.moodValue.length == 0) {
        this.messageType = "error";
        this.messageValue = "发布心情失败,字数超过五十字或无内容";
        this.message();
        return;
      }
      this.$axios
        .get("/mood/saveMood", {
          params: {
            moodValue: this.moodValue
          }
        })
        .then(successResponse => {
          if (successResponse.data == "success") {
            this.messageType = "success";
            this.messageValue = "发布心情成功";
            this.getAllMood();
          } else {
            this.messageType = "error";
            this.messageValue = "发布心情失败";
          }
          this.message();
        })
        .catch(failResponse => {});
      this.moodDialogVisible = false;
      this.moodValue = "";
    },
    // 得到所有的心情
    getAllMood() {
      this.$axios({
        method: "get",
        url: "/mood/getMoodPage",
        params: {
          page: 1,
          size: 30
        }
      }).then(successResponse => {
        // this.allMood = successResponse.data.content;
        this.allMood = successResponse.data;
      });
    },
    // 页码改变
    pageChange(pageNum) {
      this.$axios({
        method: "get",
        url: "/mood/getMoodPage",
        params: {
          page: pageNum,
          size: 30
        }
      }).then(successResponse => {
        this.allMood = successResponse.data;
        console.log(this.allArticle);
      });
    }
  },
  created() {
    this.getAllMood();
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;

  /* &:last-child {
    margin-bottom: 0;
  } */
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  margin-left: 20%;
}

.bg-purple {
  background: #d3dce6;
  height: 150px;
}

/* 
	.bg-purple {
		background: #e5e9f2;
	} */

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #d3dce6;
}

/* 卡片*/
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  height: 100%;
}
</style>
